import { Canvas, Chart, Area, Line, Axis, Point } from "@antv/f2";
import { BOX5_NAME } from "../../constants/index";
import styles from "./boxs.css";
import { useEffect } from "react";

export function Box5({ hasTitle = true }) {
  const user = [
    { date: "2023-03-25", num: 15, total_num: 7550 },
    { date: "2023-03-26", num: 10, total_num: 7452 },
    { date: "2023-03-27", num: 21, total_num: 7473 },
    { date: "2023-03-28", num: 29, total_num: 7502 },
    { date: "2023-03-29", num: 16, total_num: 7518 },
    { date: "2023-03-30", num: 17, total_num: 7535 },
  ];
  useEffect(() => {
    const context = document.getElementById("Box5")?.getContext("2d");
    if (!context) return
    const { offsetWidth } = context.canvas;
    const { props } = (
      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
        <Chart
          data={user}
          scale={{
            date: {
              range: [0, 1],
              type: "timeCat",
              mask: "MM-DD",
              tickCount: 5,
            },
            value: {
              max: 300,
              tickCount: 4,
            },
          }}
        >
          <Axis field="num" />
          <Axis field="total_num" position="right" />
          <Axis
            field="date"
            tickCount={3}
            style={{
              label: { align: "between" },
            }}
          />
          <Area
            x="date"
            y="num"
            color="l(90) 0:#1890ff 1:#fff"
            adjust="stack"
          />
          <Area
            x="date"
            y="total_num"
            color="l(90) 0:#13c2c2 1:#fff"
            adjust="stack"
          />
          <Line x="date" y="num" color="#1890ff" shape="smooth" />
          <Line x="date" y="total_num" color="#13c2c2" shape="smooth" />
          <Point x="date" y="num" color="#1890ff" />
          <Point x="date" y="total_num" color="#13c2c2" />
          <group>
            <text
              style={{
                x: 10,
                y: 6,
                text: "当天注册",
                textAlign: "left",
                fontSize: 8,
                fill: "#7f7f7f",
              }}
            ></text>
            <text
              style={{
                x: offsetWidth - 60,
                y: 6,
                text: "累计注册",
                fontSize: 8,
                fill: "#7f7f7f",
              }}
            ></text>
          </group>
        </Chart>
      </Canvas>
    );
    const chart = new Canvas(props);
    chart.render();
  }, []);
  return (
    <div className={styles.box}>
      {hasTitle && <div className={styles.title}>{BOX5_NAME}</div>}
      <canvas className={styles.main} id="Box5"></canvas>
    </div>
  );
}
